<template>
  <div class="can-edit-cell" :class="disabled ? 'disabled' : ''">
    <slot></slot>
  </div>
</template>
<script setup>
defineProps({
  disabled: {
    type: Boolean,
    default: false
  }
})
</script>
<style lang="less" scoped>
.edit-cell-full {
  width: 100%;
  height: 100%;
  :deep(.ant-select-selection-overflow-item-suffix) {
    display: none;
  }
}
.disabled {
  background-color: var(--disabled-bg-color) !important;
  cursor: not-allowed;
  pointer-events: none;
  :deep(.ant-input) {
    color: var(--disabled-text-color) !important;
  }
  :deep(.ant-select-selector) {
    color: var(--disabled-text-color) !important;
  }
  :deep(.ant-picker-input) {
    input {
      color: var(--disabled-text-color) !important;
    }
  }
}
.ant-table-cell-row-hover {
  .can-edit-cell {
    :deep(.ant-input-affix-wrapper) {
      background: transparent;
    }
    :deep(.ant-select) {
      background: transparent;
    }
    :deep(.ant-select-selector) {
      background: transparent;
    }
    :deep(.ant-input) {
      background: transparent;
    }
  }
}
.edit-cell-style() {
  .edit-cell-full();
  background: transparent;
  border: none;
  border: 1px solid transparent;
  border-radius: 0;
  &:focus {
    // background: var(--edit-cell-color) !important;
    background: var(--bg-color);
    border: 1px solid var(--primary-color);
    box-shadow: none;
  }
  &:hover {
    background: var(--bg-color);
    border: 1px solid var(--primary-color);
  }
}

.can-edit-cell {
  position: absolute;
  top: 0;
  left: 0;
  .edit-cell-full();
  // 表格input样式
  :deep(.ant-input) {
    .edit-cell-style();
    &-disabled {
      color: var(--disabled-text-color);
      background-color: var(--disabled-bg-color);
    }
  }
  // 表格select样式
  :deep(.ant-select) {
    .edit-cell-full();
    &-open {
      .ant-select-selector {
        border: 1px solid var(--primary-color);
        box-shadow: none;
      }
    }
    display: flex;
    align-items: center;
    .ant-select-arrow {
      display: none;
    }
  }
  :deep(.ant-select-selector) {
    .edit-cell-style();
    display: flex;
    align-items: center;
  }
  :deep(.ant-picker) {
    .edit-cell-style();
    display: flex;
    align-items: center;
    &-focused {
      border: 1px solid var(--primary-color);
      box-shadow: none;
    }
    .ant-picker-suffix {
      display: none;
    }
  }

  :deep(.ant-input-affix-wrapper) {
    background: var(--bg-color);
    &-focused {
      background: var(--bg-color);
      border: 1px solid var(--primary-color);
      box-shadow: none;
    }
    .edit-cell-style();
    .ant-input {
      border: none;
    }
  }
}
:deep(.ant-input-clear-icon) {
  display: none;
}
</style>
